<template>
	<view class="pickup-container" :class="themeStyle">
		<view class="current-pickup">
			<view class="current-pickup-info">
				<view class="current-pickup-im">
					<image :src="$util.img(currentPickup.pickpoint_image)" @error="imageError()"  mode="aspectFit"></image>
					<view class="content-pickup-addr">
						<text class="stores">{{currentPickup.pickpoint_name}}</text>
						<view class="store-distance"><image :src="$util.img('upload/uniapp/pick_up/location.png')" mode="aspectFit"></image>距您{{currentPickup.distance}}m</view>
					</view>
				</view>
				<text class="cur">当前</text>
				<text class="addr-content">{{currentPickup.full_address}}{{currentPickup.address}}</text>
			</view>
			<view class="pickup-address">
				<text class="location-info">当前定位:{{address}}</text>
				<view class="pickup-location">
					<image :src="$util.img('upload/uniapp/pick_up/location.png')" mode="aspectFit"></image>
					<text class="gps-location" @click="getlocInfo">重新定位</text>
				</view>
			</view>
		</view>
		<view class="pickup-tips">
			当前定位附近的提货点
		</view>
		<mescroll-uni ref="mescroll" :top="500" @getData="getpickupLists" class="pick-up">
			<view class="goods" slot="list">
				<view class="pickup-lists">
					<view class="pickup-item" :class="checked == index ? 'pickup-item-actived' : '' " v-for="(item,index) in pickupList" :key="index" @click="changeChecked(index)">
						<view class="pickup-item-img">
							<image :src="$util.img(item.pickpoint_image)" mode="aspectFit"></image>
						</view>
						<view class="pickup-item-address">
							<text class="stores">{{ item.pickpoint_name }}</text>
							<view class="store-distance"><image :src="$util.img('upload/uniapp/pick_up/location.png')" mode=""></image>距您{{ item.distance }}m</view>
							<text class="store-detail">{{ item.full_address }}</text>
						</view>
						<view class="pickup-item-checked" v-if="checked == index">
							<image :src="$util.img('upload/uniapp/pick_up/checked.png')" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<view class="pickup-submit">
			<button type="default" @click="ensure()">确认自提点</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>

export default {
	computed: {
		themeStyle() {
			return 'theme-' + this.$store.state.themeStyle;
		}
	},
	onShow() {
		this.$langConfig.refresh();
		this.initLoc();
		this.getlocInfo();
	},
	data() {
		return {
			pickupList: [],
			//选中当前地址
			checked: 0,
			currentPickup: '',
			latitude: 0,
			longitude: 0,
			current_addr: '',
			address: ''
		}
	},
	methods: {
		initLoc() {
			this.longitude = uni.getStorageSync('location').longitude;
			this.latitude = uni.getStorageSync('location').latitude;
		},
		getlocInfo() {
			this.$api.sendRequest({
				url: '/pickpoint/api/pickpoint/getLocalAddress',
				data: {
					longitude: this.longitude || 0,
					latitude: this.latitude || 0,
				},
				success: res => {
					if(res.code == 0 && res.data) {
						this.address = res.data.address;
					}
				},
				fail: res => {

				}
			})
		},
		getpickupLists(mescroll) {
			if (mescroll.num == 1) {
				this.pickupList = [];
			}
			this.$api.sendRequest({
				url: '/pickpoint/api/pickpoint/lists',
				data: {
					page: mescroll.num,
					page_size: mescroll.size,
					longitude: this.longitude || 0,
					latitude: this.latitude || 0,
				},
				success: res => {
					let newArr = []
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({
							title: msg
						})
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.pickupList = []; //如果是第一页需手动制空列表
					this.pickupList = this.pickupList.concat(newArr); //追加新数据
					this.currentPickup = this.pickupList[0];
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			})
		},
		imageError(){
			this.currentPickup.pickpoint_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		},
		changeChecked(e) {
			this.checked = e;
			this.currentPickup = this.pickupList[e];
		},
		ensure() {
			uni.setStorageSync('pickupID',this.currentPickup.pickpoint_id);
			uni.setStorageSync('address',this.currentPickup.address);
			uni.setStorageSync('full_address',this.currentPickup.full_address);
			this.$util.goBack();
		},
	}
};
</script>

<style lang="scss" scoped>
$col: column;
@mixin layout($flex-dir: row,$padding-top: $ns-padding,$padding-left: $ns-padding) {
	display: flex;
	flex-direction: $flex-dir;
	box-sizing: border-box;
	padding: $padding-top $padding-left;
}


.current-pickup {
	@include  layout($col,$ns-padding,$ns-padding);
	border-radius: 80rpx;
	overflow: hidden;
	
	.current-pickup-info {
		@include  layout($col,$ns-padding,$ns-padding);
		padding-bottom: 40rpx;
		background-image: linear-gradient(to bottom right,#FF2F36,#FF7B35);
		position: relative;
		border-radius: 20rpx;
		margin-bottom: -10rpx;
		
		.current-pickup-im {
			@include  layout(row,$ns-padding,$ns-padding);
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}
			
			.content-pickup-addr {
				@include layout($col,0,$ns-padding);
				justify-content: center;
				color:#fff;
				
				.stores {
					font-size: 36rpx;
				}
				
				.store-distance {
					background-color: #B33323;
					border-radius: 30rpx;
					padding-left: 10rpx;
					//width: 200rpx;
					color: #fff;
					
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		
		.cur {
			position: absolute;
			right:-40rpx;
			top:50rpx;
			padding: 4rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			width: 80rpx;
			color:#FF7835;
		}
		.addr-content {
			color: #FFE3E1;
			margin: 0 auto;
			width: 360rpx;
			line-height: 1.2;
		}
	}
	
	.pickup-address {
		@include  layout(row,3 / 2 * $ns-padding,$ns-padding);
		justify-content: space-between;
		align-items: center;
		background-color: #FFE8DC;
		
		.location-info {
			width: 360rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 26rpx;
		}
		
		.pickup-location {
			
			image {
				width: 24rpx;
				height: 24rpx;
			}
			
			.gps-location {
				color: #FF7835;
				margin-left: 10rpx;
			}
		}
	}
}


.pickup-tips {
	@include  layout(row,0,$ns-padding);
	font-size: $ns-font-size-lg;
}

.goods {
	.pickup-lists {
		@include  layout($col,$ns-padding,$ns-padding);
		.pickup-item {
			@include  layout(row,$ns-padding,$ns-padding);
			position: relative;
			border-radius: 20rpx;
	
			
			.pickup-item-img {
				width: 100rpx;
				height: 100rpx;
				overflow: hidden;
				border-radius: 10rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
			
			.pickup-item-address {
				@include  layout($col,0,$ns-padding);
				justify-content: center;
				
				.stores {
					font-size: 36rpx;
					font-weight: 600;
				}
				.store-distance {
					line-height: 1.5;
					border: 1px solid #FF4544;
					border-radius: 30rpx;
					color: #FF4544;
					
					image {
						margin: 0 10rpx;
						width: 24rpx;
						height: 24rpx;
					}
					margin: 20rpx 0;
				}
				.store-detail {
					line-height: 1.2;
					color: #909399;
				}
			}
			.pickup-item-checked {
				position: absolute;
				right: 0;
				bottom: -20rpx;
				image{
					width: 50px;
					height: 50px;
				}
			}
		}
		.pickup-item-actived {
			border: 1px solid #FF9C9B;
		}
	}
	
}





.pickup-submit {
	@include  layout($col,$ns-padding,$ns-padding);
	z-index: 9999999;
	position: fixed;
	bottom: 40rpx;
	width: 100%;
	button {
		background-color: #FF4544;
		color:#fff;
	}
}
</style>

